<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
    <div id="app">
        <!-- Vue.createApp({    //创建一个Vue的实例
            template: ' <div > HelloWorld-刘敏&唯爱薇o朝圣之路 </div>' 
            }).mount("#app") -->
    </div>
    <div id="counter">
        <!-- Counter: {{ counter }} -->

        <!-- const Counter = {
            data() {
                return {
                    counter: "liumin+唯爱薇o朝圣之路"
                }
            }
        }
        Vue.createApp(Counter).mount("#counter") -->

    </div>

    <div id="counter2">
        <!-- 计时器Demo -->
        <!-- Counter: {{ counter }} -->

        <!-- const Counter = {
            data() {
                return {
                    counter: 0
                }
            },
            mounted() {   //钩子函数,需要看Vue的生命周期管理流程[类似于AOP或者拦截器]
                setInterval(() => {
                    this.counter++
                },1000)
            }
        }
        Vue.createApp(Counter).mount("#counter2") -->

    </div>


    <div id="bind-attribute">
        <!-- <span v-bind:title="message">
          Hover your mouse over me for a few seconds to see my dynamically bound
          title!
        </span> -->

        <!-- const AttributeBinding = {
            data() {
              return {
                message: 'You loaded this page on ' + new Date().toLocaleString()
              }
            }
          }
          
          Vue.createApp(AttributeBinding).mount('#bind-attribute') -->


    </div>

    <div id="event-handling">
        <!-- <p>{{ message }}</p>
        <button v-on:click="reverseMessage">Reverse Message</button> -->

        <!-- const EventHandling = {
            data() {
              return {
                message: 'Hello Vue.js!'
              }
            },
            methods: {
              reverseMessage() {
                this.message = this.message
                  .split('')
                  .reverse()
                  .join('')
              }
            }
        }
          
        Vue.createApp(EventHandling).mount('#event-handling') -->

    </div>


    <div id="two-way-binding">
        <!-- <p>{{ message }}</p>
        <input v-model="message" /> -->

        <!-- const TwoWayBinding = {
            data() {
              return {
                message: 'Hello Vue!'
              }
            }
          }
          
        Vue.createApp(TwoWayBinding).mount('#two-way-binding') -->

    </div>


    
    <!-- # Conditionals and Loops -->
    <div id="conditional-rendering">
        <!-- <span v-if="seen">Now you see me</span> -->

        <!-- const ConditionalRendering = {
            data() {
              return {
                seen: true
              }
            }
        }
          
        Vue.createApp(ConditionalRendering).mount('#conditional-rendering') -->



    </div>
    
    <div id="list-rendering">
        <!-- <ol>
          <li v-for="todo in todos">
            {{ todo.text }}
          </li>
        </ol> -->

        <!--         
                const ListRendering = {

                    data() {
                        return {
                            todos: [
                                { text: 'Learn JavaScript' },
                                { text: 'Learn Vue' },
                                { text: 'Build something awesome' },
                                { text: 'VloveV.我正在修行,唯爱薇o朝圣之路' }
                            ]
                        }
                    }
                }

                Vue.createApp(ListRendering).mount('#list-rendering') -->
        

    </div>

    
    <div id="todo-list-app">
        <ol>
          <!--
            Now we provide each todo-item with the todo object
            it's representing, so that its content can be dynamic.
            We also need to provide each component with a "key",
            which will be explained later.
          -->
          <!-- <todo-item
            v-for="item in groceryList"
            v-bind:todo="item"
            v-bind:key="item.id"
          ></todo-item>

        </ol> -->


        <!-- const TodoList = {
            data() {
              return {
                groceryList: [
                  { id: 0, text: 'Vegetables' },
                  { id: 1, text: 'Cheese' },
                  { id: 2, text: 'Whatever else humans are supposed to eat' }
                ]
              }
            }
          }
          
        const app = Vue.createApp(TodoList)
        
        app.component('todo-item', {
        props: ['todo'],
        template: `<li>{{ todo.text }}</li>`
        })
        
        app.mount('#todo-list-app') -->

      </div>


      <div id="app">
        <app-nav></app-nav>
        <app-view>
          <app-sidebar></app-sidebar>  
          <app-content></app-content>
        </app-view>
      </div>

    <script>



    </script>
</body>
</html>